<template>
<!-- 去除首尾空格：修饰符.trim -->
  <div class="post-comment">
    <van-field
      v-model.trim="message"
      rows="2"
      autosize
      type="textarea"
      maxlength="50"
      placeholder="请输入评论"
      show-word-limit
    />
    <van-button 
      class="post-btn"
      type="default"
      :disabled="!message"
      @click="postBtnClick"
    >发布</van-button>
  </div>
</template>

<script>
import {postComment} from '@/api/article';

export default {
  name: "PostComment",
  components: {},
  props: {
    // 发布文章评论，则传递文章ID
    // 发布回复
    target: {
      type: [String, Number, Object],
      required: true,
    },
    articleId: {
      type: [String, Number, Object],
      default: null
    },
  },
  data() {
    return {
      message: ''
    };
  },
  computed: {},
  watch: {},
  methods: {
    async postBtnClick() {
      this.$toast.loading({
        message:"发布中...",
        forbidClick: true //禁止背景点击
      })
      const articleId = this.articleId ? this.articleId.toString() : null;
      const {data} = await postComment(this.target.toString(),this.message,articleId);
      console.log("发布评论",data)

      this.$emit('post-success',data.data.new_obj);
      this.$toast.success('发布成功');
      this.message = '';
    }
  },
  created() {},
  mounted() {},
};
</script>

<style lang="less" scoped>
//@import url(); 引入公共css类
.post-comment {
  display: flex;
  align-items: center;
  padding: 10px;
  .post-btn {
    // border: unset;
  }
}
</style>
